<!--
 * @Description: 导航菜单
 * @Author: wang_k
 * @Date: 2023-03-16 11:29:25
 * @LastEditTime: 2023-03-16 11:54:26
 * @FilePath: /demo_important/src/components/NavMenu/index.vue
-->
<template>
  <div class="sideBar">
    <!-- <el-menu
      class="el-menu-vertical-demo"
      :default-active="curRoute"
      :collapse="isCollapse"
    >
      <template v-for="(pItem, pIndex) in menuLists">
        <el-submenu v-if="!pItem.url" :index="pIndex + ''" :key="pIndex">
          <template slot="title">
            <i :class="pItem.icon"></i>
            <span>{{ pItem.menuName }}</span>
          </template>

          <el-menu-item
            :index="child.url"
            v-for="(child, cIndex) in pItem.childMenuList"
            :key="cIndex"
            @click="enterOperate(child.url, child.menuId)"
            style="padding-left: 55px"
          >
            {{ child.menuName }}
          </el-menu-item>
        </el-submenu>

        <el-menu-item
          v-else
          :index="pIndex + ''"
          :key="pIndex"
          @click="enterOperate(pItem.url, pItem.menuId)"
        >
          <template slot="title">
            <i :class="pItem.icon" style="color: #ffffff"></i>
            <span>{{ pItem.menuName }}</span>
          </template>
        </el-menu-item>
      </template>

      <el-menu-item @click="enterOperate('/console/environmentalStat', 22222)">
        <template slot="title">
          <i class="el-icon-s-marketing"></i>
          <span>数据统计</span>
        </template>
      </el-menu-item>
    </el-menu> -->

    <el-menu default-active="0" :collapse="isCollapse">
      <el-submenu
        :index="item.menuId + ''"
        v-for="item in menuLists"
        :key="item.menuId"
      >
        <template slot="title">
          <span>{{ item.menuName }}</span>
        </template>
        <el-menu-item
          :index="subItem.menuId + ''"
          v-for="subItem in item.childMenuList"
          :key="subItem.menuId"
        >
          <span slot="title">{{ subItem.menuName }}</span>
        </el-menu-item>
      </el-submenu>
    </el-menu>
  </div>
</template>
<script type="text/ecmascript-6">
// import { mapState } from 'vuex';
export default {
  data() {
    return {
      curRoute: '0',
      menuLists: [],
      isCollapse: false,
    };
  },
  // computed: mapState({
  //   isCollapse: function (state) {
  //     return state.menuIsCollapse;
  //   },
  // }),
  methods: {
    enterOperate(moduleRoute, menuId) {
      // this.$store.commit('setMenuId', menuId);
      // this.$router.push({ path: moduleRoute, query: { menuId: menuId } });
    },
  },
  mounted() {
    this.menuLists = [
      {
        childMenuList: [],
        icon: 'el-icon-menu',
        isMainMenu: null,
        menuId: 28,
        menuName: '应用管理',
        parentId: null,
        seq: null,
        url: '/console/appCenter',
      },
      {
        icon: 'el-icon-document-checked',
        isMainMenu: null,
        menuId: 29,
        menuName: '数据产品',
        parentId: null,
        seq: null,
        url: null,
        childMenuList: [
          {
            childMenuList: null,
            icon: null,
            isMainMenu: null,
            menuId: 34,
            menuName: '产品列表',
            parentId: null,
            seq: null,
            url: '/console/dataProduct',
          },
          {
            childMenuList: null,
            icon: null,
            isMainMenu: null,
            menuId: 35,
            menuName: '图层管理',
            parentId: null,
            seq: null,
            url: '/console/dataProductLayerList',
          },
        ],
      },
      {
        childMenuList: [],
        icon: 'el-icon-menu',
        isMainMenu: null,
        menuId: 58,
        menuName: '应用管理xxx',
        parentId: null,
        seq: null,
        url: '/console/appCenter',
      },
    ];
    // this.menuLists = this.$store.state.menuList;
    console.log(this.menuLists, '888888888888');
  },
};
</script>
<style  scoped>
.sideBar {
  margin-top: 64px;
  float: left;
  height: 100%;
  max-height: calc(100% - 64px);
  overflow-y: scroll;
  background: #000;
}

/* .sideBar::-webkit-scrollbar {
  display: none;
}

.el-menu-vertical-demo:not(.el-menu--collapse) {
  width: 202px;
  height: 100%;
  border: none;
}

.el-submenu__title > i:before {
  color: #ffffff;
}

.el-menu {
  height: 100%;
}

.el-menu-item.is-active {
  background-color: #0a0c1f !important;
} */
</style>
